
<div class="mirror-custom mod-deploy">
  <loading ng-if="isLoading"></loading>
  <tabset class="mod-tab">
    <tab heading="定制镜像" active="tabActive[0].active" ui-sref="mirrorCustom">
      <ul ng-form="ng-form" name="mirrorInfoForm" ng-class="{'need-valid':needValid}" novalidate="novalidate" class="com-list-info">
        <li class="has-border"><span class="info-name">定制类型</span>
          <div class="info-content">
            <div class="line-short com-chose-repository"><span ng-click="toggleCustomType('dockerfile');needValid=false;mirrorInfoForm.$setPristine();" ng-class="{active:customtype=='dockerfile'}" class="repository">
                <div class="mirror-content"><span>Dockerfile定制</span><span class="txt-prompt txt-describe">直接在页面上编写Dockerfile并执行构建</span></div></span><span ng-click="toggleCustomType('configfile');needValid=false;mirrorInfoForm.$setPristine();" ng-class="{active:customtype=='configfile'}" class="repository">
                <div class="mirror-content"><span>配置文件定制</span><span class="txt-prompt txt-describe">选择镜像仓库中的镜像，编写配置文件，系统自动生成Dockerfile并构建</span></div></span></div>
          </div>
        </li>
        <li ng-if="customtype=='configfile'" class="has-border"><span class="info-name">选择基础镜像</span>
          <div class="info-content">
            <div class="line-short"><span class="child-name">选择镜像仓库</span>
              <div select-con="select-con" class="line-element com-select-con">
                <button class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{config.sourceImage.thirdParty===0?'DomeOS私有镜像仓库':'第三方镜像仓库'}}</button>
                <ul class="select-list">
                  <li class="select-item"><a ng-click="toggleMirrorHub(0)">DomeOS私有镜像仓库</a></li>
                  <li class="select-item"><a ng-click="toggleMirrorHub(1)">第三方镜像仓库</a></li>
                </ul>
              </div>
            </div>
            <div ng-if="config.sourceImage.thirdParty===0" class="line-long"><span class="child-name">选择镜像</span>
              <div select-con="select-con" class="line-element com-select-con">
                <button class="ui-btn ui-btn-white ui-btn-select img-select"><i class="icon-down"></i>{{img.mirror||'无私有镜像'}}</button>
                <ul class="select-list">
                  <li ng-if="img.length===0"><a>无相关镜像</a></li>
                  <li class="select-item"><a ng-click="selectMirror('baseImages')" ng-show="img.baseImages.length!==0">基础镜像</a></li>
                  <li class="select-item"><a ng-click="selectMirror('projectImages')" ng-show="img.projectImages.length!==0">项目镜像</a></li>
                  <li class="select-item"><a ng-click="selectMirror('otherImages')" ng-show="img.otherImages.length!==0">非项目镜像</a></li>
                </ul>
              </div>
              <div select-con="select-con" class="line-element com-select-con">
                <button class="ui-btn ui-btn-white ui-btn-select img-select"><i class="icon-down"></i>{{config.sourceImage.imageName||'选择镜像名称'}}</button>
                <ul class="select-list">
                  <li ng-if="img.mirrorNameList.length===0"><a>无相关镜像名称</a></li>
                  <li ng-repeat="imagenamelist in img.mirrorNameList  track by $index" class="select-item"><a ng-click="selectMirrorName(imagenamelist.imageName,imagenamelist.registry)" ng-bind="imagenamelist.imageName"></a></li>
                </ul>
              </div>
              <div select-con="select-con" class="line-element com-select-con">
                <button class="ui-btn ui-btn-white ui-btn-select img-select"><i class="icon-down"></i>{{config.sourceImage.imageTag||'选择镜像版本'}}</button>
                <ul class="select-list">
                  <li ng-if="img.mirrorTagList.length===0"><a>无相关镜像版本</a></li>
                  <li ng-repeat="imgtag in img.mirrorTagList" class="select-item"><a ng-click="config.sourceImage.imageTag=imgtag" ng-bind="imgtag"></a></li>
                </ul>
              </div>
            </div>
            <div ng-if="config.sourceImage.thirdParty===1" class="line-long"><span class="child-name">选择镜像</span>
              <div class="line-element inline-txt">
                <input placeholder="镜像仓库地址" ng-model="config.sourceImage.registryUrl" required="required" class="ui-input-white"/>
              </div>
              <div class="line-element inline-txt">
                <input placeholder="镜像名称" ng-model="config.sourceImage.imageName" required="required" class="ui-input-white"/>
              </div>
              <div class="line-element inline-txt">
                <input placeholder="镜像版本" ng-model="config.sourceImage.imageTag" required="required" class="ui-input-white"/>
              </div>
            </div>
          </div>
        </li>
        <li ng-if="customtype=='configfile'" class="has-border"><span class="info-name">添加配置文件</span>
          <div class="info-content">
            <button ng-click="mirror.addFileDefault()" class="ui-btn ui-btn-sm ui-btn-bright add-log">添加</button>
            <table ng-repeat="fileInfo in config.files" ng-class="{'edit-form':showFile&amp;&amp;showContent}" file-collapse="file-collapse" class="log-item ui-table-primary">
              <tr>
                <td class="td-small">
                  <p ng-bind="$index+1" class="con-num"></p>
                </td>
                <td>
                  <input placeholder="文件名" ng-model="fileInfo.fileName" ng-click="toggleFile()" ng-class="{'ui-input-fill':showFile}" is-required="is-required" param1="{{fileInfo.filePath}}" class="ui-input-white"/>
                </td>
                <td ng-if="!showFile" class="txt-prompt vertical">|</td>
                <td>
                  <input placeholder="文件存放路径" ng-model="fileInfo.filePath" ng-click="toggleFile()" ng-class="{'ui-input-fill':showFile}" is-required="is-required" param1="{{fileInfo.fileName}}" class="ui-input-white"/>
                </td>
                <td class="td-small"><a ng-click="mirror.deleteFileDefault('fileInfo',$index)" class="icon-cancel"></a></td>
              </tr>
              <tr>
                <td colspan="5" ng-if="!showContent" class="td-edit"> <a ng-click="toggleContent()">编辑</a></td>
                <td ng-if="showContent"></td>
                <td colspan="2" ng-if="showContent" class="td-edit"> 
                  <textarea ng-model="fileInfo.content" class="ui-input-fill"></textarea>
                </td>
                <td ng-if="showContent"></td>
              </tr>
              <tr ng-if="showContent">
                <td colspan="4" class="td-edit">
                  <button ng-click="toggleContent();mirror.clearFileWrite('fileInfo',$index)" class="ui-btn ui-btn-sm ui-btn-cancel">取消</button>
                  <button ng-click="toggleContent()" class="ui-btn ui-btn-sm ui-btn-active">保存</button>
                </td>
              </tr>
            </table>
          </div>
        </li>
        <li ng-if="customtype=='dockerfile'" class="has-border"><span class="info-name">编辑Dockerfile</span>
          <div class="info-content">
            <p class="line-word txt-prompt">ADD指令只能通过URL获取文件；COPY指令无效</p>
            <div class="line-long">
              <textarea placeholder="请输入Dockerfile" type="text" required="required" ng-model="config.dockerfileContent" class="ui-input-fill"></textarea>
            </div>
            <div class="line-long">
              <button ng-click="config.dockerfileContent=''" class="ui-btn ui-btn-sm ui-btn-bright">清空			</button>
            </div>
          </div>
        </li>
        <li ng-if="customtype=='configfile'" class="has-border"><span class="info-name">输入环境变量</span>
          <div class="info-content">
            <div ng-repeat="envConfDefault in config.envSettings" class="line-long">
              <div class="line-element inline-txt">
                <input placeholder="环境变量名" ng-model="envConfDefault.key" ng-focus="$last&amp;&amp;mirror.addEnvConfDefault()" is-required="is-required" param1="{{envConfDefault.value}}" class="ui-input-fill"/>
              </div>
              <div class="line-element inline-txt">
                <input placeholder="环境变量值" ng-model="envConfDefault.value" is-required="is-required" param1="{{envConfDefault.key}}" class="ui-input-fill"/>
              </div>
              <div class="line-element inline-txt">
                <input placeholder="环境变量描述" ng-model="envConfDefault.description" class="ui-input-fill"/>
              </div><a ng-if="config.envSettings.length&gt;1" ng-click="mirror.deleteArrItem('envConfDefault',$index)" class="txt-wrap icon-delete"></a>
            </div>
          </div>
        </li>
        <li class="has-border"><span class="info-name">发布镜像</span>
          <div class="info-content">
            <p class="line-word txt-prompt">是否作为基础镜像</p>
            <div class="line-long"><span class="com-check-con">
                <input id="isbasic" type="radio" value="1" name="netWork" ng-model="config.publish" class="ui-radio"/>
                <label for="isbasic">是</label></span><span class="com-check-con">
                <input id="nobasic" type="radio" value="0" name="netWork" ng-model="config.publish" class="ui-radio"/>
                <label for="nobasic">否</label></span></div>
            <p class="line-word txt-prompt">给指定的镜像添加描述</p>
            <div class="line-long">
              <input placeholder="镜像描述" ng-model="config.description" class="ui-input-fill line-element"/>
            </div>
            <p class="line-word txt-prompt">可以把定制镜像指定为特定编程语言的编译镜像或运行镜像</p>
            <div class="line-word">
              <input id="SpecificImg" ng-model="specificImg.isSelected" type="checkbox" name="SpecificImg" ng-click="assigImgName(specificImg.isSelected);" class="ui-check"/>
              <label for="SpecificImg">启用</label>
            </div>
            <div class="line-long">
              <div select-con="select-con" class="line-element com-select-con">
                <button ng-disabled="!specificImg.isSelected" class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{specificImg.language}}</button>
                <ul class="select-list">
                  <li class="select-item"><a ng-click="specificImg.language='java';assigImgName(true)">java</a></li>
                </ul>
              </div>
              <div select-con="select-con" class="line-element com-select-con">
                <button ng-disabled="!specificImg.isSelected" class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{specificImg.imgType=='compileimage'?'编译镜像':'运行镜像'}}</button>
                <ul class="select-list">
                  <li class="select-item"><a ng-click="specificImg.imgType='compileimage';assigImgName(true)">编译镜像</a></li>
                  <li class="select-item"><a ng-click="specificImg.imgType='runimage';assigImgName(true)">运行镜像</a></li>
                </ul>
              </div>
            </div>
            <p class="line-word txt-prompt">请指定定制镜像的名称和版本号，不能和镜像仓库中已有的镜像重复</p>
            <div class="line-long">
              <div select-con="select-con" class="line-element com-select-con">
                <input placeholder="镜像名称" type="text" required="required" ng-model="config.imageName" ng-disabled="specificImg.isSelected" ng-class="{'txt-disable':specificImg.isSelected}" class="ui-input-fill ui-btn-select"/>
              </div>
              <div select-con="select-con" class="line-element com-select-con">
                <input placeholder="镜像版本" type="text" required="required" ng-model="config.imageTag" class="ui-input-fill ui-btn-select"/>
              </div><span class="txt-wrap"><a ng-click="nameTest()" class="link-safe">重名检测</a></span>
            </div>
          </div>
        </li>
      </ul>
      <div class="com-bottom-option"><span class="com-bottom-option-con">
          <button ng-click="needValid=true;mirrorInfoForm.$valid&amp;&amp;creatBuild()" class="ui-btn ui-btn-md ui-btn-bright">开始构建</button><span ng-if="needValid&amp;&amp;mirrorInfoForm.$invalid" class="txt-error">存在不合法数据，请修改后提交！</span></span></div>
    </tab>
    <tab heading="定制记录" ng-click="selectImgList()" active="tabActive[1].active" ui-sref="mirrorCustom.log">
      <div class="chose-row">
        <div class="chose-item"><span class="chose-title">状态筛选</span>
          <div class="chose-options"><em ng-class="{'active':selectOption.state.All}" ng-click="toggleAll('state')">全部</em><em ng-class="{'active':selectOption.state.Building}" ng-click="toggleSelect('state','Building')">构建中</em><em ng-class="{'active':selectOption.state.Success}" ng-click="toggleSelect('state','Success')">成功</em><em ng-class="{'active':selectOption.state.Fail}" ng-click="toggleSelect('state','Fail')">失败</em><em class="txt-prompt">|</em>
          </div>
        </div>
        <div class="chose-item"><span class="chose-title">构建者筛选</span>
          <div class="chose-options"><em ng-class="{'active':selectOption.builduser.All}" ng-click="toggleAll('builduser')">所有人</em><em ng-class="{'active':selectOption.builduser.own}" ng-click="toggleSelect('builduser','own')">仅自己</em></div>
        </div>
      </div>
      <div class="chose-row">
        <div class="chose-item"><span class="chose-title">定制类型筛选</span>
          <div class="chose-options"><em ng-class="{'active':selectOption.type.All}" ng-click="toggleAll('type')">全部</em><em ng-class="{'active':selectOption.type.dockerfile}" ng-click="toggleSelect('type','dockerfile')">Dockerfile</em><em ng-class="{'active':selectOption.type.configfile}" ng-click="toggleSelect('type','configfile')">配置文件</em><em class="txt-prompt">|</em></div><span class="chose-title">镜像名筛选</span>
          <div class="chose-options">
            <input type="text" placeholder="输入部署名称查询" ng-model="mirKeyword" class="ui-input-search ui-input-fill"/>
          </div>
        </div>
      </div>
      <div class="mod-list">
        <customlist>
          <table class="ui-table-dome">
            <tbody>
              <tr ng-if="buildListFilter&amp;&amp;buildListFilter.length===0">
                <td colspan="9">无相关信息</td>
              </tr>
              <tr ng-repeat="custom in buildListFilter=(customList|filter:{'imageName':mirKeyword}|mirrorOptions:selectOption.state:selectOption.builduser:selectOption.type:loginUser.username)" ng-click="showDetail($index,custom.id)">
                <td ng-bind="custom.imageName"></td>
                <td> <i tooltip="镜像版本" class="icon-label"></i>{{custom.imageTag}}</td>
                <td> <i tooltip="定制类型" class="icon-config"></i>{{custom.type}}</td>
                <td> <i tooltip="构建者" class="icon-user"></i>{{custom.username}}</td>
                <td ng-switch="custom.state"><span ng-switch-when="Building" class="txt-normal">构建中</span><span ng-switch-when="Preparing" class="txt-normal">等待中</span><span ng-switch-when="Success" class="txt-success">成功</span><span ng-switch-when="Fail" class="txt-warning">失败</span></td>
                <td ng-bind="parseDate(custom.createTime)"></td>
                <td ng-bind="getInterval($index)"></td>
                <td><a href="{{custom.logHref}}" target="_blank" ng-click="stopPropagation($event)" class="link-safe">日志</a></td>
                <td><a ng-class="{'up':$index!==currentIndex}" class="icon-down up"></a></td>
              </tr>
            </tbody>
          </table>
        </customlist>
      </div>
    </tab>
  </tabset>
</div>